<template>
	<view class="home-banner">
		<swiper
			class="swiper" 
			circular 
			autoplay 
			interval="5000"
			previous-margin=""
			:style="{'height':swiperHeight+'px'}"
			@change="onSwiperChange"
		>
			<swiper-item class="item" v-for="(item, index) in list" :key="index" >
				<image 
					class="pic" 
					:class="{current: current === index}"
					:src="item.image" 
					mode="aspectFill"
					@click="navTo(item.link)"
				></image>
			</swiper-item>
		</swiper>
		<view class="dots" :style="{display: showDots}">
			<view class="dot" :class="{current: current === index}" v-for="(item, index) in list" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'HomeBanner',
		data() {
			return {
				current: 0,
				/* list: [
					{image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2221182985,1875035766&fm=26&gp=0.jpg'},
					{image: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2544696267,4055569904&fm=26&gp=0.jpg'},
					{image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2573133749,533767849&fm=26&gp=0.jpg'},
				] */
			};
		},
		props: {
			list: {
				type: Array,
				swiperHeight:'',
				default(){
					return []
				}
			}
		},
		computed:{
			showDots(){
				return this.list.length < 2 ? 'none' : 'flex';
			}
		},
		created() {
			this.setSwiperHeight()
		},
		methods: {
			onSwiperChange(e){
				this.current = e.detail.current;
			},
			setSwiperHeight(){
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(".pic").boundingClientRect();

				query.exec((res) => {
					this.swiperHeight = res[0][this.current].height;
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-banner{
		position: relative;
		background-color: #fff;
	}
	.swiper{
		width: 100%;
		padding: 10rpx 0;
		margin: 0 auto;
	}
	.pic{
		display: block;
		width: calc(100% - 60rpx);
		height: 100%;
		margin: 0 auto;
		border-radius: 16rpx;
	}
	.dots{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20rpx;
		width: 20%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}
	.dot{
		width: 15rpx;
		height: 15rpx;
		margin: 0 auto;
		background-color: rgba(0,0,0,.3);
		border-radius: 10px;
		
		&.current{
			background-color: black;
		}
	}
</style>
